<template>
  <!-- 他人空间 -->
  <div class="other">
    <h3>他人空间</h3>
    <ul>
      <li v-for="(item, index) in list" :key="list.id" @click="$router.push(`/otherHome/passages/${item.id}`)">
        <div class="avatar"><img :src="item.avatarUrl" alt=""></div>
        <div class="name">{{ item.nickName }}</div>
      </li>
    </ul>
    <span class="refresh" @click="getUserList">点击刷新</span>
  </div>
</template>

<script setup>
import { reqGetUserList } from '@/apis/user';
import { GET_USERID } from '@/utils/tokenAndId';
import { onMounted, ref } from 'vue'

// 他人空间列表
const list = ref([])

onMounted(() => {
  getUserList()
})

// 获取他人空间列表
const getUserList = async () => {
  let res = await reqGetUserList({ userId: GET_USERID(), num: 5 })
  if (res.code == 200) {
    list.value = res.data
  } else {
    console.log('获取他人空间列表失败:', res.message)
  }
}
</script>

<style lang="scss" scoped>
// 他人空间
.other {
  margin-top: .4rem;

  h3 {
    margin-bottom: .25rem;
    font-size: .3333rem;
    color: #654321;
    cursor: default;
  }

  ul {
    display: flex;
    gap: .4rem;
    margin-top: .3333rem;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .03rem;
      border: .0167rem solid transparent;
      transition: all .2s;
      cursor: pointer;

      .avatar {
        background-color: #def;
        border-radius: 50%;
        width: .8333rem;
        height: .8333rem;
        overflow: hidden;

        img {
          width: 100%;
        }
      }

      &:hover {
        box-shadow: .0167rem .0167rem .0167rem .0167rem #aaa;
        border: .0167rem solid #ccc;
        transform: translate(.05rem, .05rem);
      }
    }

    .name {
      width: .8rem;
      overflow: hidden;
      font-size: .25rem;
      text-overflow: ellipsis;
      text-align: center;
      white-space: nowrap;
      color: #333;
    }
  }

  .refresh {
    float: right;
    background-color: #987654;
    margin: .1667rem .3333rem;
    border-radius: 10%;
    padding: .1rem;
    font-size: .25rem;
    color: #fff;
    cursor: pointer;
  }

  &::after {
    content: '';
    display: block;
    clear: both;
  }
}
</style>